<template>
	<view>
		<view class="u-flex">
			<view class="u-padding-10 u-text-center" @click="dianchen" style="width: 30%;">
				位置：{{dizhi}}
			</view>
			<view class="u-padding-10" style="width: 70%;">
				<uni-search-bar placeholder="搜索新闻" @confirm="shou"></uni-search-bar>
			</view>
		</view>
		<u-swiper @change="change" :height="250" :list="lun" :effect3d="true" :interval="3000" @click="click(idd)">
		</u-swiper>
		<uni-group title="全部服务">
			<view class="item-container">
				<view class="thumb-box" v-for="(item1, index1) in tabbar" :key="index1" @click="dian(item1.link)">
					<image class="item-menu-image" :src="base+item1.imgUrl" mode=""></image>
					<view class="item-menu-name">{{item1.serviceName}}</view>
				</view>
				<view class="thumb-box"  @click="quanfu">
					<image class="item-menu-image" src="../../static/uview/example/js_select_bak.png" mode=""></image>
					<view class="item-menu-name">全部服务</view>
				</view>
			</view>
			
		</uni-group>
		<uni-group title="热门推荐">
			<view class="" style="display: flex;justify-content: space-between;flex-wrap: wrap;">
				<view v-for="(item,index) in tuijian" style="width: 48%;">
					<image :src="base+item.cover" style="width: 100%;height: 200rpx;border-radius: 15rpx;" mode=""></image>
					<view class="">
						{{filler(item.title)}}
					</view>
				</view>
			</view>
		</uni-group>
		<uni-group title="新闻分类">
			<scroll-view :scroll-x="true" style="width: 100%;white-space: nowrap;">
				<view v-for="(item,index) in fen" :style="{'backgroundColor':yan[index]}" @click="xindian(item.id,index)" :key="index" class="u-padding-20 u-text-center" style="display: inline-block;">
					{{item.name}}
				</view>
			</scroll-view>
			<view v-for="(item,index) in xin" :key="index">
				<uni-card :title="item.title" v-if="index%2 == 0" @click="click(item.id)">
					<image :src="base+item.cover" mode="" style="width: 100%;"></image>
					<view class="" v-html="filler(item.content)">
					</view>
					<view class="">
						评论数：{{item.commentNum}}
					</view>
					<view class="">
						发布时间：{{item.publishDate}}
					</view>
				</uni-card>
				<uni-card :title="item.title" v-if="index%2 != 0" :thumbnail="base+item.cover" @click="click(item.id)">
					<view class=""  v-html="filler(item.content)">
					</view>
					<view class="">
						评论数：{{item.commentNum}}
					</view>
					<view class="">
						发布时间：{{item.publishDate}}
					</view>
				</uni-card>
			</view>
		</uni-group>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				base: '',
				lun: [],
				idd: '',
				tabbar:[],
				tuijian:[],
				fen:[],
				yan:[],
				xin:[],
				dizhi:[]
			}
		},
		onLoad() {
			this.base = uni.getStorageSync('serIP')
			this.getlun()
			this.getlun2()
			this.getlun3()
			this.getlun4()
			this.getlun5(9)
			this.getlun7()
		},
		methods: {
			click(id){
				if(id == null){
					uni.showToast({
						title:'id为空',
						icon:"none",
					})
					return
				}
				uni.navigateTo({
					url:'newlist/xianq?id='+id
				})
			},
			dianchen(){
				uni.navigateTo({
					url:'newlist/chen'
				})
			},
			getlun7(){
				this.$get(this.base+'/prod-api/api/common/gps/location').then((res)=>{
					this.dizhi = res.data.location
				})
			},
			quanfu(){
				uni.switchTab({
					url:'allserver/allserver'
				})
			},
			click2(id){
				uni.navigateTo({
					url:'newlist/newlist'
				})
			},
			xindian(id,index){
				this.yan = []
				this.yan[index] = 'red'
				this.getlun5(id)
			},
			getlun4(){
				this.$get(this.base+'/prod-api/press/category/list').then((res)=>{
					this.fen = res.data		
				})
			},
			filler(str){
				return str.length>16?str.substring(0,14)+'...':str
			},
			getlun3(){
				this.$get(this.base+'/prod-api/press/press/list',{
					top:'Y'
				}).then((res)=>{
					this.tuijian = res.rows			
				})
			},
			getlun5(id){
				this.$get(this.base+'/prod-api/press/press/list',{
					type:id,
				}).then((res)=>{
					this.xin = res.rows			
				})
			},
			dian(url){
				uni.navigateTo({
					url:url
				})
			},
			getlun2() {
				this.$get(this.base + '/prod-api/api/service/list').then((res) => {
					this.tabbar = res.rows.slice(0, 9)
				})
			},
			getlun() {
				this.lun = []
				this.yan = []
				this.yan[0] = 'red'
				this.$get(this.base + '/prod-api/api/rotation/list').then((res) => {
					res.rows.forEach((item) => {
						this.lun.push({
							image: this.base + item.advImg,
							id: item.targetId
						})
					})
				})
			},
			change(e) {
				this.idd = this.lun[e].id
			},
			shou(e) {
				uni.navigateTo({
					url: 'newlist/newlist?value=' + e.value
				})
			},
		}
	}
</script>

<style>
	.item-container {
			display: flex;
			flex-wrap: wrap;
		}
	
		.thumb-box {
			width: 20%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			margin-top: 20rpx;
		}
	
		.item-menu-image {
			width: 80rpx;
			height: 80rpx;
		}
</style>
